<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="/ecp/resources/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/ecp/resources/themes/icon.css">
	<script type="text/javascript" src="/ecp/resources/js/jquery-1.8.1.js"></script>
	<script type="text/javascript" src="/ecp/resources/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/ecp/resources/js/public.js"></script>
	<script type="text/javascript">
	   function query(){ 
	       /**
             2. 用数据表格请求 带参数
          */
	       $('#dg').datagrid({  
            url:'json/index.do',
            method:'POST',
            queryParams:getQueryParam()
	      });
	      
	  /*$('#dg').datagrid('load',{
		  code: '01',
		  name: 'name01'
        }); */
        
	   }
	   
	   var f1 = function (value,row,index){
					if (value==1){
						return '无效';
					} else {
						return row.itemid;
					}
				}
		
		/**
         value: the field value.
		 rowData: the row record data.
		 rowIndex: the row index. 
         */
        var f2 = function(value,row,index){
				if (value == 1){
					return 'background-color:#ffee00;color:red;';
				}
	     }
				
				
	   function getQueryParam(){
	      obj =$("#form1").serializeObject();
	     return obj;
	   }
	  
	 /**
           1. 直接加载数据，可以用jquery直接从服务器抓取数据，然后给数据表格加载
        */  
	 function query2(){
	   var str = $("#form1").serialize();
	   str = str+"&page=1&rows=10";
	    alert(str);
	   $.ajax({
		   type: "POST",
		   url: "json/index2.do",
		   data: str,
		   dataType:"json",
		   success: function(msg){
		       $('#dg').datagrid({  
		            data:msg   
	      });
   }
   
       
});
	 }
	</script>
</head>
<body>
	
	<div style="margin:10px 0;"></div>
	<table id="dg" class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:750px;height:350px"
			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb',pagination:true,loadMsg:'正在查询，请稍后...'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:240">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',formatter:f1,styler:f2">Status</th>
			</tr>
		</thead>
	</table> 
	
	<div id="tb" style="padding:0px;height:auto;">
		<div style="margin-bottom:5px">
		  <form id="form1">
		    <table>
		     <tbody>
		     <tr>
			  <th>Date From:</th>
			  <td><input name="startDate"  class="easyui-datebox" style="width:100px"></td>
			 <th>To: </th>
			 <td><input name="endDate" class="easyui-datebox" style="width:100px"></td>
			<th>Language:</th>
			<td><select name="language" class="easyui-combobox" panelHeight="auto" style="width:100px">
				<option value="java">Java</option>
				<option value="c">C</option>
				<option value="basic">Basic</option>
				<option value="perl">Perl</option>
				<option value="python">Python</option>
			</select></td> 
			</tr>
			<tr>
		     <th>name:</th>
			 <td><input name="name" type="text" class="easyui-validatebox" style="width:100px"></td>
		     <th>Product:</th>
		      <td><input name="Product" type="text" class="easyui-validatebox" style="width:100px"></td>
		     <th> Status: </th>
		     <td><input name="Status" type="text" class="easyui-validatebox" required="true" style="width:100px"></td>
		     <td></td>
		     <td></td>
			 <td colspan="2"><a href="#" onclick="query()" class="easyui-linkbutton" iconCls="icon-search">Search</a></td>
		     </tr>
		     </tbody>
		  </table>
		 </form>
		</div>
		 <div style="border-bottom-color:#ccc;border-bottom-style:solid;border-bottom-width:1px"></div>  
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">add</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">edit</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true">save</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true">cut</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">remove</a>
		</div>
	</div>
</body>
</html>